import React, { Component } from 'react';
import { connect } from 'react-redux';
import {loginAction, loginState} from './index';
import { withRouter } from 'react-router-dom';
import { Form, Row, Col, Input, Icon, Button } from 'antd';
import Cookies from 'js-cookie';
import styles from './Login.less';


class Login extends Component{
    constructor(props) {
        super(props);
        this.state = {
            text: '获取验证码',
            disabled: false,
        };
        this.timer = null;
    }

    getCaptcha = () => {
        //post ajax
        const { dispatch, form: { getFieldValue } } = this.props;
        const phoneNo = getFieldValue('phoneNumber');
        dispatch(loginAction.lgGetCode({ phoneNo }));
        let index = 60;
        this.setState({
            text: `重新获取(${index}S)`,
            disabled: true
        });
        this.timer = setInterval(() => {
            index--;
            if(index === 0) {
                clearInterval(this.timer);
                this.setState({
                    text: '获取验证码',
                    disabled:false
                });
                return;
            }
            this.setState({
                text: `重新获取(${index}S)`,
                disabled: true
            });
        },1000)
    }

    handleSubmit = (e) => {
        const { dispatch, form: { getFieldsValue } } = this.props;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const { phoneNumber, captcha } =getFieldsValue();
                dispatch(loginAction.lgPostLogin({
                    phoneNo: phoneNumber,
                    code: captcha
                }));
                // Cookies.set('name', 'zs');
                // history.push('/index');
            }
        });
    }

    componentWillReceiveProps(nextProps) {
        const { isCancelTimer, dispatch } = nextProps;
        if(isCancelTimer && isCancelTimer !== this.props.isCancelTimer) {
            clearInterval(this.timer);
            this.setState({
                text: '获取验证码',
                disabled: false,
            }, () => {
                dispatch(loginAction.lgCancelTimer(false));
            })
        }
    }
    componentDidMount() {
        // console.log(Cookies.get('JSESSIONID'))
        // const { dispatch } =  this.props;
    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }
    render() {
        const { form: { getFieldDecorator } } = this.props;
        const { text, disabled } = this.state;
        return (
            <div className={styles.loginBg}>
                <div className={styles.formBg}>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item>
                            {getFieldDecorator('phoneNumber', {
                                rules: [{ required: true, message: '手机号不能为空' }],
                                initialValue: ''
                            })(
                                <Input addonBefore={<Icon type={'phone'}/>} size={'large'} placeholder="请输入手机号" />
                            )}
                        </Form.Item>

                        <Row>
                            <Col span={16}>
                                <Form.Item>

                                    {getFieldDecorator('captcha', {
                                        rules: [{ required: true, message: '验证码不能为空' }],
                                        initialValue: ''
                                    })(
                                        <Input addonBefore={<Icon type={'key'}/>} size={'large'} type="text" placeholder="请输入验证码" />
                                    )}

                                </Form.Item>
                            </Col>
                            <Col span={8} style={{textAlign: 'right'}}>
                                <Form.Item>
                                    <Button className={styles.captcha} type={'primary'} size={'large'} disabled={disabled} onClick={this.getCaptcha}>{text}</Button>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Form.Item>
                            <Button size={'large'} type="primary" htmlType="submit" className={styles.loginBtn}>
                                登 录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}
const mapStateToProps = (state) => {
    const { loginState: { loginManageState } } = state;
    return {
        btnLoading: loginManageState['btnLoading'],
        isCancelTimer: loginManageState['isCancelTimer']
    }
};
export default connect(mapStateToProps)(Form.create()(withRouter(Login)));